import React, { PureComponent } from 'react';

import { Table, Tag } from 'antd';
import { Resizable } from 'react-resizable';

import styles from './index.css';

/**
 * 检索:数据表格
 */
export class Index extends PureComponent {

  columns = [
    {
      title: '账号',
      dataIndex: 'account',
    },
    {
      title: 'FTP地址',
      dataIndex: 'url',
    },
    {
      title: '备注',
      dataIndex: 'remark',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: status => (
        <span>
          {
            <Tag color={status == 'OFF' ? '#f50' : '#78cd51'}>{status == 'OFF' ? '禁用' : '正常'}</Tag>
          }
        </span>
      )
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
    },
    {
      title: '操作',
      render: (text, record) => {
        console.log(record);
        return (
          <>
            {
              record.status == 'OFF' ?
                <Tag color={'blue'} style={{ cursor: 'pointer' }} onClick={() => { this.statusTagClickedHandler(record) }}>启用</Tag>
                :
                <Tag color={'blue'} style={{ cursor: 'pointer' }} onClick={() => { this.statusTagClickedHandler(record) }}>禁用</Tag>
            }
            <Tag color={'blue'} style={{ cursor: 'pointer' }} onClick={() => { this.editTagClickedHandler(record) }}> 编辑 </Tag>
          </>
        )
      }
    },
  ];

  render() {
    const { state: { total, list, page, limit } } = this.props;

    console.log(page);
console.log(limit);

    return (
      <div className={styles.data_table}>
        {/* 数据表单 */}
        <Table
          rowKey="id"
          scroll={{
            x: true
          }}
          columns={this.columns}
          dataSource={list}
          pagination={{
            position: 'bottom',
            total: total,
            showTotal: (total, range) => `共${total}条数据`,
            itemRender: (page, type, originalElement) => {
              if (type === 'prev') {
                return <button className={styles.prev_btn}>上一页</button>;
              }
              if (type === 'next') {
                return <button className={styles.prev_btn}>下一页</button>;
              }
              return originalElement;
            },
            current: page,
            defaultCurrent: 1,
            defaultPageSize: limit,
            onChange: this.pageChangedHandler,
            showSizeChanger: true,
            onShowSizeChange: this.pageSizeChangedHandler,
            showQuickJumper: true,
            hideOnSinglePage: false,
          }}
        />
      </div>
    )
  }


  /**
  * 编辑标签点击事件
  */
  editTagClickedHandler = (record) => {
    const { onEdit } = this.props;
    !!onEdit && onEdit(record);
  }

  /**
  * 状态标签点击事件
  */
  statusTagClickedHandler = (record) => {
    const { onRecordStatusChange } = this.props;
    !!onRecordStatusChange && onRecordStatusChange(record);
  }

  /**
   * 页数被改变时
   * page：当前页数
   * pageSize：改变后的每页记录数
   */
  pageChangedHandler = (page, pageSize) => {
    const { onPageChange } = this.props;
    !!onPageChange && onPageChange(page, pageSize);
  }

  /**
   * 每页显示记录数被改变时
   * page：当前页数
   * pageSize：改变后的每页记录数
   */
  pageSizeChangedHandler = (page, pageSize) => {
    const { onPageSizeChange } = this.props;
    !!onPageSizeChange && onPageSizeChange(page, pageSize);
  }
}

export default Index;
